<template>
  <div class="register-container">
    <!-- 注册内容 -->
    <div class="register">
      <h3>
        注册新用户
        <span class="go">我有账号，去 <router-link to="/login">登陆</router-link></span>
      </h3>
      <el-card shadow="always" :body-style="{ padding: '100px 300px',margin:'20px 100px'}" style="margin:40px auto">
        <el-form :model="dataObj" ref="ruleFormRef" :rules="rules" label-width="80px" :inline="false" size="normal">
          <el-form-item label="手机号 :" prop="phone">
            <el-input v-model="dataObj.phone" placeholder="请输入你的手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码 :" prop="password">
            <el-input v-model="dataObj.password" placeholder="请输入验证码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码 :" prop="password1">
            <el-input v-model="dataObj.password1" placeholder="请输入确认密码" type="password"></el-input>
          </el-form-item>
        </el-form>
        <!-- 协议同意 -->
        <div class="controls">
          <input v-model="dataObj.agree" type="checkbox" name="agree" />
          <span>同意协议并注册</span>
        </div>
        <div class="btn">
          <button @click="register">完成注册</button>
        </div>
      </el-card>
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { reqGetCode } from '../../api/login/login'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const ruleFormRef = ref()
const router = useRouter()
const dataObj = reactive({
  //手机号码
  phone: "",
  //验证码
  // code: "",
  //密码
  password: "",
  //确认密码
  password1: "",
  //协议勾选
  agree: true,
})
// 手机号
const validatePass = (rule: any, value: any, callback: any) => {
  if (/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
    callback()
  } else {
    callback(new Error('请按照正确格式输入手机号'))
  }
}
// 密码
const password = (rule: any, value: any, callback: any) => {
  if (value == dataObj.password) {
    callback()
  } else {
    callback(new Error('密码不一致'))
  }
}
const register = () => {
  localStorage.setItem('userInfo', JSON.stringify(dataObj))
  ruleFormRef.value.validate((a, b) => {
    if (a) {
      ElMessage({
        type: 'success',
        message: '用户注册成功'
      })
      router.push({ name: 'Login' })
    }
  })
  // if (dataObj.phone.trim() === '' || dataObj.password.trim() === '' || dataObj.password1.trim() === '') {
  //   ElMessage.error('用户信息不能为空')
  //   return
  // }


}
// 表单验证
const rules = reactive<FormRules>({
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: validatePass, trigger: 'blur' }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  password1: [
    { required: true, message: '确认密码是否一致', trigger: 'blur', },
    { validator: password, trigger: 'blur' }
  ],
})

</script>


<style  scoped>
.register-container {
  height: 700px;
}

.register {
  width: 1200px;
  height: 445px;
  margin: 20px auto;
}

.register h3 {
  background: #ececec;
  margin: 0;
  padding: 6px 15px;
  color: #333;
  border-bottom: 1px solid #dfdfdf;
  font-size: 20.04px;
  line-height: 30.06px;
}

.register h3 span {
  font-size: 14px;
  float: right;
}

.register h3 span a {
  color: #e1251b;
}



.register div:nth-of-type(1) {
  /* margin-top: 40px; */
}

/* .content {
  padding-left: 390px;
  margin-bottom: 18px;
  position: relative;
}

.content label {
  font-size: 14px;
  width: 96px;
  text-align: right;
  display: inline-block;
}

.content input {
  width: 270px;
  height: 38px;
  padding-left: 8px;
  box-sizing: border-box;
  margin-left: 5px;
  outline: none;
  border: 1px solid #999;
} */

/* .content img {
  vertical-align: sub;
}

.content .error-msg {
  position: absolute;
  top: 100%;
  left: 495px;
  color: yellowgreen;
} */

.controls {
  text-align: center;
  position: relative;
}

.controls input {
  vertical-align: middle;
}

.controls .error-msg {
  position: absolute;
  top: 100%;
  left: 495px;
  color: red;
}


.btn {
  text-align: center;
  line-height: 36px;
  margin: 17px 0 0 55px;
}

.btn button {
  outline: none;
  width: 270px;
  height: 36px;
  background: #e1251b;
  color: #fff !important;
  display: inline-block;
  font-size: 16px;
  border: none;
}



.copyright {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  line-height: 24px;
}


.copyright ul li {
  display: inline-block;
  border-right: 1px solid #e4e4e4;
  padding: 0 20px;
  margin: 15px 0;
}
</style>